<template>
  <div class="bg-[transparent] page">
    <PageWrap
      class="bg-[transparent]"
      formClass="page-form"
      contentClass="page-content"
    >
      <template #form>
        <div class="w-[100%]">
          <div
            class="mb-[8px] bg-[var(--base-color)] rounded-[8px] pt-[10px] px-[8px]"
          >
            <slot name="search"></slot>
          </div>
          <div class="bg-[var(--base-color)] rounded-t-[8px] px-[8px]">
            <slot name="tab"></slot>
          </div>
        </div>
      </template>
      <div class="bg-[var(--base-color)] h-[100%]">
        <slot></slot>
      </div>
    </PageWrap>
  </div>
</template>

<script setup>
import PageWrap from "@/components/PageWrap/index.vue";
</script>

<style lang="scss" scoped>
.page {
  height: 100%;
  :deep(.page-form) {
    padding: 8px 8px 0;
  }
  :deep(.page-content) {
    margin: 0 10px;
    background-color: var(--base-color);
    padding: 0 8px 0;
  }
  :deep(.vxe-pager){
    height: 40px;
  }
}
</style>
